<template>
	<view class="container" :style="{height: bgHeight}">
		<view class="container-bg">
			<view class="title">发布内容</view>
			<view class="form-box">
				<view class="item-box">
					<view class="item-label">请选择通知类型：</view>
					<view class="item-input">
						<picker @change="noticeTypeChange" :range="noticeTypeList" range-key="value">
							<view class="uni-input">{{noticeTypeList[noticeTypeIndex].value}}</view>
						</picker>
					</view>
					<view class="item-arrow">
						<text class="iconfont iconarrow-down"></text>
					</view>
				</view>
				<view class="item-box">
					<view class="item-label">请选择班级：</view>
					<view class="item-input">
						<picker @change="classChange" :range="classList" range-key="Name">
							<view class="uni-input">{{classList[classIndex].Name}}</view>
						</picker>
					</view>
					<view class="item-arrow">
						<text class="iconfont iconarrow-down"></text>
					</view>
				</view>
				<view class="item-box">
					<view class="item-label">请选择科目：</view>
					<view class="item-input">
						<picker @change="courseChange" :range="courseList" range-key="Name">
							<view class="uni-input">{{courseList[courseIndex].Name}}</view>
						</picker>
					</view>
					<view class="item-arrow">
						<text class="iconfont iconarrow-down"></text>
					</view>
				</view>
				<view class="content-box">
					<textarea v-model="content" placeholder="请输入要发布的内容" class="content-input"></textarea>
				</view>
			</view>
			<view class="publish-btn" @tap="doSubmit">发布</view>
		</view>
	</view>
</template>

<script>
	import {myRequest,showToastMsg} from '../../utils'
	
	export default {
		data() {
			return {
				loading: false,
				bgHeight: '603px',
				noticeTypeIndex: 0,
				noticeTypeList: [
					{id: 1, value: '作业通知'},
					{id: 2, value: '会议通知'}
				],
				noticeTypeId: 0,
				noticeClassId: 0,
				noticeCourseId: 0,
				classList: [],
				courseList: [],
				classIndex: 0,
				courseIndex: 0,
				content: '',
				timer: null
			}
		},
		
		onLoad() {
			
			let that = this
			
			myRequest({
				url: '/api/class_list_by_teacher',
				data: {},
			}, function(res) {
						
				if (res.statusCode != 200) {
					uni.showModal({
						title: '提示',
						content: '服务器错误，请求失败'
					})
					return
				}
						
				if (res.data.status != 0) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
						
				that.classList = res.data.data
						
			})
			
			myRequest({
				url: '/api/course_list',
				data: {},
			}, function(res) {
						
				if (res.statusCode != 200) {
					uni.showModal({
						title: '提示',
						content: '服务器错误，请求失败'
					})
					return
				}
						
				if (res.data.status != 0) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
						
				that.courseList = res.data.data
						
			})
			
		},
		
		onShow() {
			this.bgHeight = (uni.getSystemInfoSync().screenHeight - 64) + 'px'
		},
		
		methods: {
			
			noticeTypeChange(e) {
				this.noticeTypeIndex = e.target.value
			},
			
			classChange(e) {
				this.classIndex = e.target.value
			},
			
			courseChange(e) {
				this.courseIndex = e.target.value
			},
			
			doSubmit() {
				
				let that = this
				
				that.noticeTypeId = that.noticeTypeList[that.noticeTypeIndex].id
				that.noticeClassId = that.classList[that.classIndex].Id
				that.noticeCourseId = that.courseList[that.courseIndex].Id
				
				if (that.noticeTypeId <= 0) {
					showToastMsg('请选择通知类型')
					return
				}
				if (that.noticeClassId <= 0) {
					showToastMsg('请选择班级')
					return
				}
				if (that.noticeCourseId <= 0) {
					showToastMsg('请选择科目')
					return
				}
				if (that.content.trim().length <= 0) {
					showToastMsg('请输入发布内容')
					return
				}
				
				if (that.loading) return
				that.loading = true
				
				uni.showLoading({
					title: '拼命提交中...',
					success() {
						
						if (that.timer != null) {
							clearTimeout(that.timer)
						}
						
						that.timer = setTimeout(function() {
							
							myRequest({
								url: '/api/publish',
								data: {
									type_id: that.noticeTypeId,
									class_id: that.noticeClassId,
									course_id: that.noticeCourseId,
									content: that.content
								},
							}, function(res) {
								
								uni.hideLoading()
								that.loading = false
								
								if (res.statusCode != 200) {
									uni.showModal({
										title: '提示',
										content: '服务器错误，请求失败'
									})
									return
								}
								
								if (res.data.status == 1000) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
									return
								}
								
								showToastMsg(res.data.msg)
								
								if (res.data.status == 0) {
									that.content = ''
								}
								
							})
							
						}, 1000)
						
					}
				})
				
			}
			
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';  /* project id 1705280 */
		src: url('https://at.alicdn.com/t/font_1705280_otaltml7zrq.ttf') format('truetype');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 36rpx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.iconarrow-down:before {
	  content: "\e601";
	}
	
	.container {
		width: 750rpx;
		background-image: radial-gradient(circle, #fedd04, #fec305);
		min-height: 1200rpx;
	}
	
	.container-bg {
		position: absolute;
		width: 750rpx;
		height: 100%;
		background-image: url(https://public-1300796766.cos.ap-guangzhou.myqcloud.com/mini/2.png);
		background-size: cover;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.title {
		font-size: 50rpx;
		margin-top: 50rpx;
	}
	
	.form-box {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	
	.item-box {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		margin-top: 30rpx;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
	}
	
	.item-label {
		width: 240rpx;
		margin-left: 30rpx;
	}
	
	.item-input {
		width: 270rpx;
	}
	
	.content-box {
		width: 560rpx;
		height: 530rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
	}
	
	.content-input {
		width: 100%;
		height: 100%;
	}
	
	.publish-btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		font-size: 38rpx;
	}
</style>
